<script setup>
import { ossImg } from "@/utils/utils";

const props = defineProps({
  modalType: String,
})

const emdlz = getApp().emdlz2
const emits = defineEmits(['close', 'service'])

const onService = () => emits('service')

const onCloseDialog = () => {
  if (props.modalType === 'rule') {
    // 事件追踪-16
    emdlz('track','event','rulespopup','click','close_rules', '');
    // emdlz('track','event','Oreo_eggy_rules_page','click','close_tips','');
  } else if (props.modalType === 'privacy') {
    // 事件追踪-22
    // emdlz('track','event','Oreo_eggy_policy_page','click','close_tips1','');
  }
  emits('close')
}

const onAgreeDialog = () => {
  emdlz('track','event','rulespopup','click','agree_rules', '');
  uni.setStorageSync('CLOUD_SAMPLE_AGREE', true)
  emits('agree')
}

const onBackCloseDialog = () => {
  if (props.modalType === 'rule') {
    emdlz('track','event','Oreo_eggy_rules_page','click','go_back1','');
  } else if (props.modalType === 'privacy') {
    // 事件追踪-21
    emdlz('track','event','Oreo_eggy_policy_page','click','go_back2','');
  }
  emits('back')
}
</script>

<template>
  <view class="rule-modal">
    <!-- <image
      class="w-72px h-26px mb-31px absolute left-0 top-42px z-999"
      :src="ossImg('others/cloudsample/dialog/but_back.png')"
      @click.stop="onBackCloseDialog"
    /> -->
    <view
      class="rule-modal__body"
      :style="{ backgroundImage: `url(${ossImg(`others/2025OreoSnacksXEggyParty/dialog/bg_${props.modalType}.png`)})`}"
    >
      <image
        class="w-36px h-36px absolute top-1px right-4px"
        :src="ossImg('others/2025OreoSnacksXEggyParty/dialog/close.png')"
        @click.stop="onCloseDialog"
      ></image>
      <scroll-view class="rule-text" :scroll-y="true">
        <image
          class="text-image"
          mode="widthFix"
          :class="{ 'privacy-text': props.modalType === 'privacy' }"
          :src="ossImg(`others/2025OreoSnacksXEggyParty/${props.modalType}_content.png`)"
        ></image>
      </scroll-view>
      <!-- <image
        class="service-btn"
        :src="ossImg(`others/cloudsample/dialog/but_service.png`)"
        @click.stop="onService"
      ></image> -->
      <image
        class="agree-btn"
        :src="ossImg(`others/2025OreoSnacksXEggyParty/dialog/btn_agree.png`)"
        @click.stop="onAgreeDialog"
      ></image>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.rule-modal {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 20px;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: -1;
  }
  .rule-modal__body {
    margin: 0 auto;
    width: 308px;
    height: 481px;
    background-size: 100% 100%;
    background-position: top center;
    background-repeat: no-repeat;
    overflow: scroll;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 90px;
    .service-btn {
      width: 112px;
      height: 36px;
      margin-top: 37px;
    }
    .agree-btn{
      width: 148px;
      height: 31px;
      margin-top: 28px;
    }
    .rule-text {
      height: 320px;
      box-sizing: border-box;
      image {
        margin: 0 auto;
        display: block;
      }
      .text-image {
        width: 267px;
      }
    }
  }
}
</style>
